<template>
<div 
    class="cp-container"
    :style="{
        '--grid-columns':`6rem ${new Array(cols.length+1).join(' 10rem')}`,
    }">
    <div class="top">
        <div></div>
        <div
            v-for="item in cols"
            :key="item">
            {{item}}
        </div>
    </div>
    <div
        class="cell"
        v-for="(item,index) in rows"
        :key="index">
        <div class="name">{{index}}</div>
        <div 
            class="data"
            v-for="(_item,_index) in cols.length"
            :key="_index">
            <NovakChart
                :pointData="dataToPoint(item[cols[_index]])">
            </NovakChart>
        </div>
    </div>
</div>
</template>
<script>
/*
 基础数据展示组件
 */
import NovakChart from '@/components/novak/NovakChart';
export default {
    components:{
        NovakChart,
    },
    data() {
        return {
            loading:false,
            cols:[],  //列数据
            rows:{},  //行数据
        };
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){  //可由外部调用
            this.loading = true;
            this.$Service.post(
                this.$Api.chemical,
                {
                    isbasic:1,
                },
            ).then(data => {
                let dataList = data.data;
                let rows = {};  //行数据
                let cols =[];  //列数据
                //数据格式化
                dataList.forEach(item => {
                    rows[item.horizon] = rows[item.horizon] || {};  //初始化
                    rows[item.horizon][item.area] = item;
                    (!cols.includes(item.area)) && cols.push(item.area);
                });
                this.rows = rows;
                this.cols = cols;
            }).finally(() => {
                this.loading = false;
            });
        },
        dataToPoint(novak){  //数据转点数据
            if(!novak) return [];
            return [novak.ca_mg,novak.na_ca,novak.na_mg,novak.na_k_ca_mg,novak.mg_k,novak.na_k];
        },
    },
};
</script>
<style scoped lang="scss">
.cp-container{
    width: fit-content;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    height: fit-content;
    padding: 1rem;
    box-sizing: border-box;
    color: white;
    >.top{
        display: grid;
        grid-template-columns: var(--grid-columns);
        margin-bottom: 1rem;
        >div{
            padding: 0 5px;
        }
    }
    >.cell{
        display: grid;
        grid-template-columns: var(--grid-columns);
        position: relative;
        width: fit-content;
        >.name{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        >.data{
            height: 150px;
            border-left: 1px solid var(--border-color-2);
            border-bottom: 1px solid var(--border-color-2);
            position: relative;
            &:last-child{
                border-right: 1px solid var(--border-color-2);
            }
            >.other{
                position: absolute;
                top: 0;
                right: 0;
                color: #00c57a;
                font-size: 20px;
            }
        }
        &::after{
            content: '';
            position: absolute;
            top: -1px;
            right: 0;
            height: 1px;
            width: calc(100% - 6rem);
            background-color: var(--border-color-2);
        }
    }
}
</style>
